<template>
	<view class="waitReturnDetail">
		<view class="pBox">
			<text class="one">等待买家归还</text>
			<text class="one" v-if="isdetermine">等待平台确认归还租赁品信息</text>
			
			<!-- <text class="two">剩23小时59分钟关闭</text> -->
		</view>
		<view class="orderInfo">
			<view class="title">订单编号：{{info.order_number}}</view>
			<view class="list" v-for="(v,i) in info.detail" :key='i'>
				<!-- <view class="iconfont icon-xuanzhong"></view> -->
				<view class="info">
					<image :src="v.cover" mode=""></image>
					<view class="goodsInfo">
						<view class="name line1">{{v.title}}</view>
						<view class="remark line1">{{v.spec}}</view>
						<view class="priceBox ">
							<view class="price">{{v.price}}</view>
							<view class="nums">{{v.number}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box10">
			<view class="maxBox">
				<picker mode ="date" start="1999-01-01" :end = "end" disabled="true">
					<view class="box disFlex  scale-1px-bottom">
						<view class="leftWord">租赁开始日期</view>
						<view class="next rightWord">{{info.start_time}}</view>
					</view>
				</picker>
				<picker mode ="date" start="1999-01-01" :end = "end" disabled="true">
					<view class="box disFlex  scale-1px-bottom">
						<view class="leftWord">租赁结束日期</view>
						<view class="next rightWord">{{info.end_time}}</view>
					</view>
				</picker>
				<!-- <view class="box disFlex  " @tap="choose">
					<view class="leftWord">提货方式</view>
					<view class="next rightWord">选择</view>
				</view> -->
				<view class="box disFlex  ">
					<view class="leftWord">收货地址</view>
					<!-- <view class="next rightWord">2020.06.10 13:00</view> -->
				</view>
				<view class="getType scale-1px-bottom " >
					<view>请前往自提点：{{site.address}}</view>
					<view>联系人：{{site.name}}</view>
					<view>联系电话：{{site.phone}}</view>
				</view>
				<!-- <view class="getType scale-1px-bottom" v-if="true">
					<view>罗小黑</view>
					<view>134****8376 </view>
					<view>上海上海市松江区兴联中心村110号</view>
				</view> -->
				                
				<view class=" disFlex paddingTop20 paddingBottom20" style="align-items: flex-start;">
					<view style="font-size: 32rpx;">备注</view>
					<view style="flex: 1;color: #BEC9D7;" class="paddingLeft20">{{info.remark}}</view>
				</view>
			</view>
		</view>
		
		<view class="box10">
			<view class="maxBox" style="padding-bottom: 120rpx;">
				<view class="box disFlex  scale-1px-bottom" v-if="info.integral==0?false:true">
					<view class="leftWord">积分抵扣</view>
					<view class=" rightWord1">
						<text >当前积分抵扣{{info.deduction}}元</text>
						<text class="iconfont icon-xuanzhong" style="color: #2291FF;margin-left: 16rpx;"></text>
					</view>
				</view>
				<view class="box disFlex  scale-1px-bottom">
					<view class="leftWord">运费</view>
					<view class="rightWord1">{{info.freight}}元</view>
				</view>
				<view class="box disFlex  ">
					<view class="leftWord">费用</view>
					<view class=" rightWord1">租赁期共{{day}}天  费用 ￥{{tatal}}</view>
				</view>
				<!-- <view class="box disFlex scale-1px-bottom ">
					<view class="leftWord">押金</view>
					<view class=" rightWord1">￥600</view>
				</view> -->
				<view class="pay box">
					<text class="text">实付：</text>
					<text class="price">{{info.price}}</text>
				</view>
				
			</view>
		</view>
		
		<!-- <view class="box10">
			<view class="maxBox">
				<view class="box disFlex  scale-1px-bottom">
					<view class="leftWord">快递物流</view>
					<view class=" rightWord1">德邦快递</view>
				</view>
				<view class="box disFlex  ">
					<view class="leftWord">快递编号</view>
					<view class=" rightWord1">1256222323223</view>
				</view>
			</view>
		</view> -->
		<view class="box10">
			<view class="maxBox">
				<view class="box disFlex  " @tap="choose" >
					<view class="leftWord">归还方式</view>
					<view class=" rightWord next">{{fs}}</view>
				</view>
				<view class="getType scale-1px-bottom " v-if="isshow">
					<view>请前往归还点：{{newsite.address}}</view>
					<view>联系人：{{newsite.name}}</view>
					<view>联系电话：{{newsite.phone}}</view>
				</view>
			</view>
		</view>
		
		
		<view class="box10" v-if="show">
			<view class="maxBox">
				<view class="box disFlex  scale-1px-bottom">
					<view class="leftWord">租赁归还物流公司</view>
					<input type="text" v-model="data.name" placeholder="请输入物流公司名称"  :disabled="isdetermine" style="text-align: right;"/>
					<!-- <view class=" rightWord1">请输入物流公司名称</view> -->
				</view>
				<view class="box disFlex " >
					<view class="leftWord">租赁归还物流单号</view>
					<input type="text" v-model="data.number" :disabled="isdetermine" placeholder="请输入物流单号" style="text-align: right;"/>
				</view>
			</view>
		</view>
		<view class="bottom" v-if="!isdetermine">
			<button @tap="to">确定归还</button>
		</view>
		
		
		<view class="pop" v-if="pop">
			<view class="popBox">
				<view class=" color" @tap="hidePop">快递</view>
				<view @tap="hidePop1">自还</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow:false,
				show:false,
				isdetermine:false,
				fs:'选择',
				end:"",
				disabled:false,
				activeIndex:0,
				pop:false,
				info:'',
				site:'',
				newsite:'',
				data:{
					id:'',
					type:'',
					name:'',
					number:'',
					address:''
				}
			}
		},
		onLoad(option) {
			this.getNowDate();
			this.data.id=option.id
			this.getinfo()
		},
		onShow(){
			this.getnewsite()
		},
		methods: {
			getinfo(){
				this.http('/api/standard_order/read', 'post', {id:this.data.id}, )
					.then((res) => {
						this.info=res.data
						console.log(this.info)
						if(this.info.status==5){
							this.isdetermine=false
						}else{
							this.isdetermine=true
							if(this.info.return_type==1){
								this.fs='自送'
								this.show=false
								this.isshow=true
								this.data.address=this.info.return_address
								this.getnewsite()
							}else{
								this.fs='快递'
								this.show=true
								this.isshow=false
								this.data.name=this.info.return_express_name
								this.data.number=this.info.return_express_number
							}
						}
						this.getsite()
						
					})
			},
			getsite(){
				this.http('/api/address/site', 'post', {}, )
					.then((res) => {
						res.data.map((v)=>{
							if(v.id==this.info.deliver_address){
								this.site=v
							}
						})
					})
			},
			to(){
				// this.getnav(this.router(`successDetail?id=${this.id}`))
				uni.showModal({
					title:'提示',
					content:'是否确认归还？',
					cancelColor:'#BEC9D7',
					confirmText:'确认',
					success: (e) => {
						if (e.confirm) {
							// if()
							this.http('/api/standard_order/give_back', 'post', this.data, )
								.then((res) => {
									if(res.sta==200){
										this.getnav(this.router(`myRentOrder?type=${''}`));
										uni.showToast({ title: '归还成功，等待卖家验收!', icon: 'none' })
										
									}else{
										uni.showToast({ title: res.msg, icon: 'none' })
									}
								})
						}
					}
				})
				
			},
			getNowDate () {
				let date = new Date();
				let year = date.getFullYear();
				let mouth = date.getMonth() + 1;
				if (mouth < 10) {
					mouth = '0' + mouth;
				}
				let day = date.getDate();
				if (day < 10) {
					day = '0' + day;
				}
				this.end = year+'-'+mouth+'-'+day;
			},
			hidePop () {
				this.data.type=2
				this.pop = false;
				this.show=true;
				this.isshow=false;
				this.fs="快递"
			},
			hidePop1(){
				this.data.type=1
				this.pop = false;
				this.isshow=true;
				this.show=false;
				this.fs="自送",
				this.getnav(this.router(`myAddress`));
			},
			otherFun(id){
			this.data.address=id
			},
			getnewsite(){
				this.http('/api/address/site', 'post', {}, )
					.then((res) => {
						res.data.map((v)=>{
							if(v.id==this.data.address){
								this.newsite=v
							}
						})
					})
			},
			choose () {
				if(!this.isdetermine){
					
				this.pop = true;
				}
			}
		},
		computed:{
			day(){
				let sDate1=this.info.start_time,sDate2=this.info.end_time
				let  aDate,  oDate1,  oDate2,  iDays
				       aDate  =  sDate1.split("-") 
				       oDate1  =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])    //转换为12-18-2006格式 
				       aDate  =  sDate2.split("-") 
				       oDate2  =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0]) 
				       iDays  =  parseInt(Math.abs(oDate1  -  oDate2)  /  1000  /  60  /  60  /24)    //把相差的毫秒数转换为天数 
				       return  iDays+1 
			},
			tatal(){
				let tatal=0
				if(this.day>0){
				this.info.detail.map((v)=>{
					tatal+=v.price*v.number*this.day
				})	
				}
				return tatal
			},
		}
	}
</script>

<style lang="less">
	.waitReturnDetail{
		padding-bottom: 120rpx;
		.pBox{
			height:120rpx;
			background:linear-gradient(90deg,rgba(34,145,255,1) 0%,rgba(93,174,255,1) 100%);
			padding-left: 40rpx;
			line-height: 120rpx;
			text{
				color: #fff;
			}
			.one{
				font-size: 32rpx;
			}
			.two{
				font-size: 24rpx;
				padding-left: 20rpx;
			}
		}
		.orderInfo{
			padding: 40rpx;
			.title{
				font-size: 32rpx;
			}
			.list{
				margin-top: 50rpx;
				display: flex;
				align-items: center;
				.icon-xuanzhong{
					color: #2291FF;
				}
				.info{
					flex: 1;
					// margin-left: 20rpx;
					display: flex;
					align-items: center;
					image{
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
					}
					.goodsInfo{
						flex: 1;
						height: 160rpx;
						padding-left: 28rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.name{
							font-weight: bold;
							font-size:32rpx;
						}
						.remark{
							font-size:24rpx;
							color:rgba(190,201,215,1);
						}
					}
					.priceBox{
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.price{
							font-size: 36rpx;
							color: #FE7203;
							font-weight: bold;
							&:after{
								content: '/件/天';
								font-size: 24rpx;
								font-weight: normal;
							}
						}
						.nums{
							&::before{
								content: 'x';
							}
						}
					}
				}
			}
		}
		.maxBox{
			padding:0 40rpx;
			.box{
				height: 100rpx;
				
				.leftWord{
					font-size: 32rpx;
				}
				.rightWord{
					color: #BEC9D7;
					padding-right: 30rpx;
				}
				.rightWord1{
					color: #BEC9D7;
				}
			}
			.pay{
				text-align: right;
				line-height: 100rpx;
				.text{
					font-size: 32rpx;
					color: #BEC9D7;
				}
				.price{
					color: #FD7103;
					font-weight:bold;
					&::before{
						font-size: 32rpx;
						padding-right: 4rpx;
					}
				}
			}
			.getType{
				padding-bottom: 35rpx;
				view{
					color: #BEC9D7;
				}
			}
			.remark{
				padding: 35rpx 0;
				display: flex;
				.leftWord{
					font-size: 32rpx;
				}
				textarea{
					flex: 1;
					margin-left: 67rpx;
					box-sizing: border-box;
					padding: 20rpx;
					border:1rpx solid rgba(229,229,229,1);
					border-radius:10rpx;
				}
			}
		}
		.bottom{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 90rpx;
			padding: 0 40rpx;
			z-index: 99;
			button{
				width: 100%;
				line-height: 90rpx;
				background:rgba(34,145,255,1) !important;
				border-radius:10rpx;
				color: #fff;
				font-size: 32rpx;
			}
		}
		.pop{
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			z-index: 999;
			background:rgba(0,0,0,.3);
			.popBox{
				position: absolute;
				top: 50%;
				left: 70rpx;
				width: calc(100% - 140rpx);
				background-color: #fff;
				height:286rpx;
				border-radius:20rpx;
				transform: translateY(-50%);
				display: flex;
				flex-direction: column;
				view{
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 36rpx;
					font-weight:bold;
				}
				.color{
					color: #2291FF;
				}
			}
		}
	}
</style>
